---
metaTitle: Styling
metaDescription: Radix Primitives are unstyled—and compatible with any styling solution—giving you complete control over styling.
---

# Styling

<Description>
	Radix Primitives are unstyled—and compatible with any styling solution—giving
	you complete control over styling.
</Description>

## Styling overview

### Functional styles

You are in control of all aspects of styling, including functional styles. For example—by default—a [Dialog Overlay](../components/dialog) won't cover the entire viewport. You're responsible for adding those styles, plus any presentation styles.

### Classes

All components and their parts accept a `className` prop. This class will be passed through to the DOM element. You can use it in CSS as expected.

### Data attributes

When components are stateful, their state will be exposed in a `data-state` attribute. For example, when an [Accordion Item](../components/accordion) is opened, it includes a `data-state="open"` attribute.

## Styling with CSS

### Styling a part

You can style a component part by targeting the `className` that you provide.

```jsx line=3,7
import * as React from "react";
import { Accordion } from "radix-ui";
import "./styles.css";

const AccordionDemo = () => (
	<Accordion.Root>
		<Accordion.Item __className__="AccordionItem" value="item-1" />
		{/* … */}
	</Accordion.Root>
);

export default AccordionDemo;
```

### Styling a state

You can style a component state by targeting its `data-state` attribute.

```css
.AccordionItem {
	border-bottom: 1px solid gainsboro;
}

.AccordionItem[__data-state__="open"] {
	border-bottom-width: 2px;
}
```

## Styling with CSS-in-JS

The examples below are using [styled-components](https://styled-components.com/), but you can use any CSS-in-JS library of your choice.

### Styling a part

Most CSS-in-JS libraries export a function for passing components and their styles. You can provide the Radix primitive component directly.

```jsx line=5-7,11
import * as React from "react";
import { Accordion } from "radix-ui";
import styled from "styled-components";

const StyledItem = __styled__(Accordion.Item)`
  border-bottom: 1px solid gainsboro;
`;

const AccordionDemo = () => (
	<Accordion.Root>
		<StyledItem value="item-1" />
		{/* … */}
	</Accordion.Root>
);

export default AccordionDemo;
```

### Styling a state

You can style a component state by targeting its `data-state` attribute.

```jsx
import { Accordion } from "radix-ui";
import styled from "styled-components";

const StyledItem = styled(Accordion.Item)`
	border-bottom: 1px solid gainsboro;

	&[__data-state__="open"] {
		border-bottom-width: 2px;
	}
`;
```

## Extending a primitive

Extending a primitive is done the same way you extend any React component.

```tsx
import * as React from "react";
import { Accordion as AccordionPrimitive } from "radix-ui";

const AccordionItem = React.forwardRef<
	React.ElementRef<typeof AccordionPrimitive.Item>,
	React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
>((props, forwardedRef) => (
	<AccordionPrimitive.Item {...props} ref={forwardedRef} />
));
AccordionItem.displayName = "AccordionItem";
```

## Summary

Radix Primitives were designed to encapsulate accessibility concerns and other complex functionalities, while ensuring you retain complete control over styling.

For convenience, stateful components include a `data-state` attribute.
